import Vue from 'vue'
import Router from 'vue-router'
//  普通加载方式
import Home from './views/Home.vue'

Vue.use(Router)

let router = new Router({
  // 路由模式  hash、history
  mode: 'history',
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home,
      meta: {
        title: '首页!!'
      },
      // 路由独享守卫 进入前触发
      beforeEnter(to, from, next) {
        next()
      }
    },
    {
      path: '/about',
      name: 'about',
      // route level code-splitting
      // this generates a separate chunk (about.[hash].js) for this route
      // which is lazy-loaded when the route is visited.
      // 路由懒加载方式， 减少打包后的js体积
      component: () => import(/* webpackChunkName: "about" */ './views/About.vue'),
      meta: {
        auth: true
      }
    }
  ]
})

// 全局路由，路由更新前
router.beforeEach((to, from, next) => {
  if (to.meta.title) {
    document.title = to.meta.title
  }

  if (to.meta.auth) {
    next()
  } else {
    next()
  }
})

// 路由更新后
// router.afterEach


// 路由解析守卫，和 router.beforeEach 类似，区别是在导航被确认之前，同时在所有组件内守卫和异步路由组件被解析之后，解析守卫就被调用
// router.beforeResolve

export default router
